<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>宠物查询系统</title>
	<link rel="stylesheet" href="static/public/bootstrap/css/bootstrap3.3.7.css">  
	<link rel="stylesheet" href="static/userlogin/css/userlogin.css">  
	<script src="static/public/jquery/jquery.min.js"></script>
	<script src="static/public/bootstrap/js/bootstrap3.3.7.min.js"></script>
</head>
<!-- 背景渐变部分 -->
<script src="static/public/jquery/jquery-2.1.1.min.js"></script>
<script src="static/public/jquery/jquery.gradientify.min.js"></script>
<script src="static/userlogin/js/userlogin.js"></script>
<!-- 表单部分 -->
<body id="body1">
<input type="hidden" value="{{request.args.get('msg')}}" id="msg1">
<script>
var sliderValue = document.querySelector('input[id="msg1"]').value; 
if(sliderValue == '用户注册成功!'){
	confirm(sliderValue);
}
	
	
</script>
	<div class="login-container">
<h1 align="center"><a href="/"><span class="title-set-gra">宠物查询系统</span></a>登录</h1>
<div align="center" style="color: red;">{{msg}}</div>
 <form class="form-horizontal" role="form" method="post" action="login"><!-- userlogin -->
	<input type="hidden" name="page" value="{{page}}">
	<div class="form-group">
		<label for="uname" class="col-sm-2 control-label" style="color: rgb(0,0,0,0.3)">用户名</label>
		<div class="col-sm-10">
			<input type="text" class="form-control person-circle" name="uname" id="uname" placeholder="请输入用户名" value="{{request.values.get('uname','')}}">
		</div>
	
	
	 
			
	</div>
	<div class="form-group">
		<label for="password" class="col-sm-2 control-label" style="color: rgb(0,0,0,0.3)">密码</label>
		<div class="col-sm-10">
			<input type="password" class="form-control shield-fill" name="password" id="password" placeholder="请输入密码" value="{{request.values.get('password ','')}}">
		</div>
	</div>
	
	<!-- 这里是验证码图片部分 -->
		<div class="form-group">
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<img id="verifycode" src="/verifycode/?" alt="CheckCode" >
	&nbsp;&nbsp;&nbsp;	
				<span id="verifycodeChange">看不清换一张</span>
		</div>
		<!-- 输入验证码部分 -->
		<div class="form-group">
			<label for="password" class="col-sm-2 control-label" style="color: rgb(0,0,0,0.3)">验证码</label>
			<div class="col-sm-10">
				<input type="text" class="form-control shield-fill" name="verifycode" id="verifycode" placeholder="请输入验证码" value="{{request.values.get('verifycode ','')}}">
			</div>
		</div>
		<script src="static/userlogin/js/vs.js"></script>
	
	
	
	
	<div class="form-group">&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input style="position: relative 5px;" type="checkbox" name="loves" v-model="checkValue" value="记住我"/>
	   <label for="" style="color: rgb(0,0,0,0.6)">记住我</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;		   
	   <button type="submit" class="btn btn-default btn-login">登录</button>
	   <a class="btn btn-default btn-login " href="login?flag=1">刷脸登录</a>
	   <button type="reset" class="btn btn-default btn-login">重置</button>
	</div>
	
    <div class="form-group">
	<div class="col-sm-2">
		<input type="hidden" >
	</div>
	<a href="" onclick="alert('请联系管理员进行解决'+'\n'+'管理员邮箱:admin@qq.com')"><span style="font-size:15px;">忘记密码</span></a>
	
	</div>
	
    <div class="form-group">

		
       <div class="col-sm-2" >
	       <input type="hidden">
       </div>
	
	<a href="register"><span style="font-size:15px;">注册</span></a>
		
	</div>

	
	
	
	

</form>
</div>
{% if flag == '1' %}
<h2 align="center">用户刷脸登录</h2>
<div align="center">

	<!-- <button onclick="takepicloginpic()"> 立即登录</button> -->
	<video  src="" id="video1" width="500" height="300" autoplay="autoplay" style="display: block;margin: auto;"></video>
	<canvas id="canvas1" width="500" height="300" style="display: block;margin: auto;"></canvas>
	

<script>
	var video1 = document.getElementById("video1")
	var canvas1 = document.getElementById("canvas1")
	var context = canvas1.getContext("2d") //得到画布
	var con={
		audio:false,
		video:true,
		video:{
			width:500,
			height:300
		}
	}
	try{
		navigator.mediaDevices.getUserMedia(con).then(function(stream){
		  try{
			video1.src=window.URL.createObjectURL(stream)
		  }catch(e){
			video1.srcObject=stream
		  }
		})
	} catch(e){//有异常另外方式
		navigator.webkitGetUserMedia({video:true},function(stream){
			video1.src = window.webkitURL.createObjectURL(stream);
		
		},function(error){
			alert(error);
		})
	}
	//拍照
	function takepic(){
		context.drawImage(video1,0,0,500,300)
	}
//相片登录
function loginpic(){
	var imgsrc = canvas1.toDataURL("image/png")
	//去掉前面标志的部分
	imgsrc = imgsrc.split("base64,")[1]       //去掉前面标致的部分
	imgsrc = encodeURIComponent(imgsrc);//编码字符窜
	$.ajax({
        url:"userfacelogin",
		type:'post',
		data:"imgstr="+imgsrc,
		success:function(res){
           if(res == '登录成功'){
			// 这里展示访问这个地址,后面会改
			 location = "/" 
		      }    
			   else if(res ==''){//继续登录

		   }
		   
		   else{//登陆没有成功
			alert(res)
			location = "login"

		   }

		}



	})
}
//拍照以登陆
function takepicloginpic(){
takepic();
loginpic();

}
setInterval('takepicloginpic()',3000);



</script>
</div>
{% endif %}
</body>
</html>